<template>
    <button v-for="btn in buttons" :key="btn" @click="handle(btn)" :class="['tab-button',{active:btn===selectBtn}]">{{btn}}</button>
    <component :is="dynamic"></component>
</template>

<script setup>
import userManageVue from './userManage.vue';
import configManageVue from './configManage.vue';
import {ref,computed} from "vue"

let buttons = ref(['用户管理','配置管理'])
let selectBtn = ref('用户管理')

let handle = (btn) => {
    selectBtn.value = btn
    // console.log(selectBtn.value)
}

let dynamic = computed(()=>{
    if(selectBtn.value==='用户管理'){
        return userManageVue
    }else{
        return configManageVue
    }
})

</script>


<script>
/* import userManageVue from './userManage.vue';
import configManageVue from './configManage.vue'; */

export default{
    /* data(){
        return {
            buttons:['用户管理','配置管理'],
            seleceBtn:'用户管理'
        }
    }, */
    meta:{
        title: 'yhgl', 
        name: '用户管理',
        routeName:"users",
        icon:'#icon-yonghu'
    },
    /* computed:{
        dynamic(){
            return this.seleceBtn 
        }
    },
    components:{
        "用户管理":userManageVue,
        "配置管理":configManageVue
    },
    methods:{
        handle(btn){
            this.seleceBtn = btn
        }
    } */
}


</script>


<style lang="less" scoped>

.tab-button{
    background:none;
    border:0;
    font-size: 16px;
    line-height: 50px;
    margin-right: 30px;
    margin-bottom: 20px;
}
.tab-button.active{
    // background-color: aqua;
    border-bottom: 2px solid #00BFFF;
}




</style>